import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import {ActionSheet, Button,Label} from 'iftide';

export default class Basic extends Component {
  constructor() {
    super();
    this.state={
      clickedValue: ''
    }
  };

  openActionSheet1 = () => {
    this.ActionSheet1._open();
  };

  openActionSheet2 = () => {
    this.ActionSheet2._open();
  };

  actionSheet1Press(btnIndex,BUTTONS){
    this.setState({
      clickedValue: BUTTONS[btnIndex]
    })
  }

  actionSheet2Press(data){
    alert(data.title)
    this.setState({
      clickedValue: data.title
    })
  }

  render() {
    const BUTTONS = ['操作1', '操作2', '操作3','删除','取消'];
    const config = {
      message: '动作面板标题',
      //messageStyle: {fontSize:15,color:'#333'},
      //messageDes: '标题描述描述信息--',
      options: BUTTONS,
      optionsDesc: ['','操作2描述信息描述信息','','',''],
      optionsStyle: [{},{},{},{color:'red'},{}],
      //cancelButtonIndex: 4,
      //destructiveButtonIndex: 3,
    };

    const gridData = {
      data: [
        {
          'icon': require('./Icon.png'),
          'title': '标题1',
        },
        {
          'icon': require('./Icon.png'),
          'title': '标题2',
          'titleStyle': {color:'red'}
        }
        // {
        //   'icon': require('./Icon.png'),
        //   'title': '标题3',
        // },
        // {
        //   'icon': require('./Icon.png'),
        //   'title': '标题4',
        // }
      ],
      message: '动作面板标题 ',
      //messageDes: '描述描述描述',
      //messageStyle: {fontSize:15,color:'#333'},
      //columnCount: 4,
      //hasOuterBorder:false,
      //hasInnerBorder:false,
      //cancelBtnText: '取消233',
      //cancelBtnTextStyle: {color:'green'}
    };
    return (
        <View style={[styles.container, {height: '100%'}]}>
          <Label text={'动作面板样式1--列表型：'}/>
          <Button
              title={"OpenActionSheet1"}
              onPress={this.openActionSheet1}
          />
          <Label text={'动作面板样式2--icon型：'}/>
          <Button
              title={"OpenActionSheet2"}
              onPress={this.openActionSheet2}
          />
          <Label text={'当前点击项标题：'+this.state.clickedValue}/>
          <ActionSheet
              ref={(obj) => {this.ActionSheet1 = obj}}
              type={1}
              config={config}
              cancleSuroundColor={'rgba(0,0,0,.2)'}
              callback={(btnIndex) => this.actionSheet1Press(btnIndex,BUTTONS)}
          />
          <ActionSheet
              ref={(obj) => {this.ActionSheet2 = obj}}
              type={2}
              dataSource={gridData}
              callback={(data) => this.actionSheet2Press(data)}
          />
        </View>
    )
  }
}

let styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
});